<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生活家</title>
    <link href="../images/title.ico" rel="shortcut icon">
    <link rel="stylesheet" href="../css/maikaolinreset.css">
    <link rel="stylesheet" href="../css/qnhlifeHome.css">
    <script src="../js/jquery-1.12.4.js"></script>
    <style>
     .change{
         width: 100%;
         height: 50px;
         text-align: center;
         background: yellow;
         font-size: 36px;
         line-height: 50px;
         color: black;
     }
    </style>
</head>
<body>
    <!--[if IE 6]> <div class="change">浏览器版本过低，建议更换为IE9及以上或者火狐，谷歌浏览器</div><![endif] -->
    <header>
        <div class="header">
            <a href="../index.html" class="logo">
                <h1>生活家</h1>
            </a>
            <a href="../index.html" class="headerBack">
                <img src="../images/lyx_fanhui.png" alt="返回首页">
            </a>
            <div class="headerNav">
                <a href="javascript:;" class="this">
                    <img src="../images/qnh-nav-01.png" alt="生活物语">
                </a>
                <a href="../html/lyx_meigui.html">
                    <img src="../images/qnh-nav-02.png" alt="玫瑰物语">
                </a>
            </div>
        </div>
    </header>
    <section id="warpPage">
        <div class="bg bg_01">
            <div class="content">
                <img src="../images/qnh-pic-01.png" alt="">
            </div>
        </div>
        <div class="bg bg_02">
            <div class="content contentLeft">
                <img src="../images/qnh-pic-02.png" width="270" height="610" />
                <div class="zhankaiBox">
                    <div class="zhankaiBoxFont">
                        <h2>将优雅散播至空气中的生活家</h2>
                        <p>这年轻时候的惊才艳艳、绝代风华、骄傲不羁，</p>
                        <p>被时间沉淀之后，</p>
                        <p>就变成了对生活这件事的从容和善意。</p>
                        <p>　</p>
                        <p>一幅画，</p>
                        <p>在你初学的时候，兴致匆匆一天就完成了，</p>
                        <p>而当你学到更多，发现一年也完成不了一幅，</p>
                        <p>每次面对它，都觉得还差那么一点，</p>
                        <p>这种差那么一点的体验，</p>
                        <p>既让人感到焦灼，</p>
                        <p>也让我觉得：啊，还有可进步的空间，</p>
                        <p>还有未达成的目标，</p>
                        <p>真是太好了。</p>
                        <div class="zhankai" title="1">
                            <div class="shou">
                                <ul>
                                <li>手指</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
          </div>
        </div>
        <div class="bg bg_03">
            <div class="content contentRight">
                <img src="../images/qnh-pic-05.png"/>
                <div class="zhankaiBox">
               		<div class="zhankaiBoxFont">
                         <h2>将努力变成一种静态的生活家</h2>
                         <p>应该感谢无数次的一时兴起，</p>
                         <p>很多的三分钟热度过后，</p>
                         <p>才终于遇见最想坚持的那件事。</p>
						 <p>　</p>
                         <p>茶道这件事，</p>
                         <p>好像不是努力就能悟出的，</p>
                         <p>不过还是决定学一学，</p>
                         <p>总觉得，</p>
                         <p>即使悟不出什么道，</p>
                         <p>味觉里的清朗爽快，</p>
                         <p>好像也能传递给纷杂的大脑、心肺与耳目啊。</p>
                         <div class="zhankai zhankaiNew" title="1"></div>
                    </div>
                </div>
          </div>
        </div>
        <div class="bg bg_04">
            <a href="../html/lyx_meigui.html"><img src="../images/qnh-bg-11pic.jpg" /></a>
        </div>
        <img src="../images/qnh_up.png" alt="箭头" class="topArrow">
    </section>
    <div id="right">
        <ul>
            <li class="this"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="cursor">
        <span></span>
    </div>
    <footer>
        <a href="javascript:;">
            <img src="../images/qnh_newicon.png" alt="">
        </a>
        沪ICP备05003606号Copyright©2011-2015 MecoxLane Inc. All Rights Reserved
    </footer>
    <script>
        ;(function(window,document){
            $('.contentLeft .zhankai').click(function(){
                var t = $(this).attr('title');
                if(t == 1){
                    $(this).parent('.zhankaiBoxFont').stop(false,true).stop().animate({'left':'0'}, 500);
                    $(this).attr('title','2');
                }else{
                    $(this).parent('.zhankaiBoxFont').stop(false,true).stop().animate({'left':'-480px'}, 500);
                    $(this).attr('title','1');
                }
                $(this).toggleClass('zhankaiNew'); 
            });
            $('.contentRight .zhankai').click(function(){
                var t = $(this).attr('title');
                if(t == 1){
                    $(this).parent('.zhankaiBoxFont').stop(false,true).stop().animate({'right':'0'}, 500);
                    $(this).attr('title','2');
                }else{
                    $(this).parent('.zhankaiBoxFont').stop(false,true).stop().animate({'right':'-480px'}, 500);
                    $(this).attr('title','1');
                }
                $(this).toggleClass('zhankaiNew'); 
            });
        }(window,document))
        ;(function(window,document){
            // 封装鼠标滚轮事件（兼容 火狐/其它 浏览器的触发滚轮事件 及 IE/其它 浏览器的事件监听）
            function mousewheel(obj,handle){//obj,传入滚轮事件对象；handle,事件句柄。
                if(obj.addEventListener){//判断是否存在addEventListener方法
                    obj.addEventListener('mousewheel',handle,false)//选择采用触发滚轮事件
                    obj.addEventListener('DOMMouseScroll',handle,false)
                }else if(obj.attachEvent){//判断是否存在attachEvent方法
                    obj.attachEvent('onmousewheel',handle)
                }else{//两种监听方式都不存在采用DOM0级事件绑定触发滚轮事件
                    obj.onmousewheel=handle
                }
            }
            var goListIndex = 0;
            var goListAouts = true;
            var goListBox = $('#warpPage .bg');
            var goList = goListBox.length;
            mousewheel(document,function(e){
                var e = e||window.event
                var detail = e.wheelDelta||-e.detail
                if(goListAouts == true){
                    if(detail<0){//鼠标滚轮向xia滚动
                        goListIndex++;
                        qiehuan_bottom();
                    }else{
                        goListIndex--;
                        qiehuan_top();
                    }
                }
                goListAouts = false;
            })
            function qiehuan_top(){
                if(goListIndex <= 0){
                    goListIndex = 0;
                }
                hua(goListIndex);
                setTimeout( function(){
                    goListAouts = true;
                }, 500);
                
                $('#warpPage .bg').eq(goListIndex+1).find('.content').stop(false,true).stop().animate({'margin-top':'-2000px'}, 500);
                $('#warpPage .bg').eq(goListIndex).find('.content').stop(false,true).stop().animate({'margin-top':'-220px'}, 500);	
            }
            function qiehuan_bottom(){
                if(goListIndex >= goList){
                    goListIndex = goList - 1;
                }
                hua(goListIndex);
                setTimeout( function(){
                    goListAouts = true;
                }, 500);
                
                $('#warpPage .bg').eq(goListIndex-1).find('.content').stop(false,true).stop().animate({'margin-top':'1000px'}, 500);
                $('#warpPage .bg').eq(goListIndex).find('.content').stop(false,true).stop().animate({'margin-top':'-220px'}, 500);
            }
            function hua(i){
                $('#right li').removeClass('this');
                $('#right li').eq(i).addClass('this');
                
                var top = $(window).height() * i;
                $("html, body").animate({scrollTop: top + "px"},500); 
                
                //改变头部
                if(i == goList - 1){
                    $('.topArrow').hide();
                    $('header').addClass('headerNew');
                }else{
                    $('.topArrow').show();
                    $('header').removeClass('headerNew');
                }
                
                if(i == 0){
                    $('.cursor').show();	
                }else{
                    $('.cursor').hide();
                }
                
            }
            $('#right li').click(function(){
                if($(this).index() >= goListIndex){
                    $('#warpPage .bg').eq($(this).index()-1).find('.content').stop(false,true).stop().animate({'margin-top':'1000px'}, 500);
                    $('#warpPage .bg').eq($(this).index()).find('.content').stop(false,true).stop().animate({'margin-top':'-220px'}, 500);	
                }else{
                    $('#warpPage .bg').eq($(this).index()+1).find('.content').stop(false,true).stop().animate({'margin-top':'-2000px'}, 500);
                    $('#warpPage .bg').eq($(this).index()).find('.content').stop(false,true).stop().animate({'margin-top':'-220px'}, 500);	
                }
                goListIndex = $(this).index();
                hua(goListIndex);
            })

            //箭头
            $('.topArrow').click(function(){
                goListIndex++;
                qiehuan_bottom()
            })
            bgWidth()
            function bgWidth(){
                var width = $(window).width();
                var height = $(window).height();
                $('.bg').css({
                    width:width,
                    height:height,
                })
            }
            $(window).resize(function(){ bgWidth() })
            $("html, body").animate({scrollTop: "0px"},0);
        }(window,document))
    </script>
</body>
</html>